<template>
	<view class="homeContainer">
		<!-- 自定义导航栏开始 -->
		<u-navbar :is-back="false" :background="background">
			<view class="slot-wrap">
				<u-search placeholder="请输入冷库类型" v-model="keyword" :action-style="actionStyle" @click="toProject"
					disabled></u-search>
			</view>
		</u-navbar>
		<!-- 自定义导航栏结束 -->
		<!-- 主体内容开始 -->
		<view class="homeContent">
			<!-- 轮播图开始 -->
			<view class="swiper">
				<u-swiper :list="list" title></u-swiper>
			</view>
			<!-- 轮播图结束 -->
			<!-- 导航视图区域结束 -->
			<view class="navView">
				<view class="navItem" v-for="item in navData" :key="item.title" @click="toPages(item.path)">
					<image :src="item.imgUrl" mode=""></image>
					<text>{{item.title}}</text>
				</view>
			</view>
			<!-- 导航视图区域开始 -->
			<u-gap height="1" bg-color="#ccc"></u-gap>
			<!-- 间隔槽 -->
			<!-- 最新工程案例区域开始 -->
			<view class="newProject" style="margin: 20rpx 0;">
				<u-section title="最新工程案例" sub-title="查看更多" :show-line="false" @click="toProject"></u-section>
				<projectItem :key="item.projectDesc" :name="item.projectDesc" v-for="item in projectData"
					:imgUrl="item.projectImg" :address="item.projectType" :time="item.projectTime"></projectItem>
			</view>
			<!-- 最新工程案例区域结束 -->
			<!-- 制冷百科区域开始 -->
			<view class="cyclopedia">
				<u-section title="制冷百科" sub-title="查看更多" :show-line="false" @click="toCyclopedia"></u-section>
				<view class="cyclopediaItem" v-for="item in cyclopediaData" :key="item.cyclopediaImg">
					<view class="cyclopediaInfo">
						<view class="cyclopediaDesc">
							<text>{{item.cyclopediaDesc}}</text>
						</view>
						<view class="cyclopediaName">
							<text class="author">{{item.author}}</text>
							<text class="readeNum">阅读 {{item.readeNum}}人</text>
						</view>
					</view>
					<view class="cyclopediaImg">
						<image :src="item.cyclopediaImg" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 制冷百科区域结束 -->

		</view>
		<!-- 主体内容结束 -->
	</view>
</template>

<script>
	import {
		request
	} from '../../utils/http.js'
	import projectItem from '../../compontents/projectItem/projectItem'
	export default {
		components: {
			projectItem
		},
		data() {
			return {
				// 自定义状态懒栏背景颜色
				background: {
					backgroundColor: "#00aaff",
				},
				// 输入框文字颜色
				actionStyle: {
					color: "#fff"
				},
				// 输入框绑定数据
				keyword: "",
				// 轮播图数据
				list: [],
				// 视图导航数据
				navData: [{
						imgUrl: "../../static/viewIcon/1.png",
						title: "工程案例",
						path: "../project/project"
					},
					{
						imgUrl: "../../static/viewIcon/2.png",
						title: "制冷百科",
						path: "../cyclopedia/cyclopedia"
					},
					{
						imgUrl: "../../static/viewIcon/3.png",
						title: "预算报价",
						path: "../offer/offer"
					},
					{
						imgUrl: "../../static/viewIcon/4.png",
						title: "制冷设备",
						path: "../chillerPlant/chillerPlant"
					}
				],
				// 最新工程案例数据
				projectData: [{
						projectImg: "../../static/homeImg/1.jpg",
						projectDesc: "南川小型保鲜库施工中",
						projectType: "保鲜库",
						projectTime: "2021-09-21",
						readNum: 20,
						like: 100

					},
					{
						projectImg: "../../static/homeImg/2.jpg",
						projectDesc: "江津小型冷冻库施工中",
						projectType: "冷冻库",
						projectTime: "2021-08-21",
						readNum: 60,
						like: 50

					}
				],
				// 制冷百科数据
				cyclopediaData: [{
						cyclopediaDesc: "我竟然在重庆的半山腰上发现了陶渊明式的“桃花源记",
						author: "制冷百科",
						readeNum: 40,
						cyclopediaImg: "../../static/homeImg/3.jpg"
					},
					{
						cyclopediaDesc: "我竟然在重庆的半山腰上发现了陶渊明式的“桃花源记",
						author: "制冷百科",
						readeNum: 40,
						cyclopediaImg: "../../static/homeImg/2.jpg"
					}
				]
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			getData() {
				request({
					url:'/goods/brand/list',
					method:'get'
				}).then(res=>{
					this.list=res.data
				})
			},
			toProject() {
				uni.switchTab({
					url: '../project/project'
				})
			},
			// 跳转页面
			toPages(item) {
				uni.reLaunch({
					url: item
				})
			},
			// 跳转到制冷百科
			toCyclopedia() {
				uni.reLaunch({
					url: "../cyclopedia/cyclopedia"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 自定义状态栏样式
	.slot-wrap {
		display: flex;
		margin: 0 20rpx;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		/* flex: 1; */
		/* 如果您想让slot内容与导航栏左右有空隙 */
		/* padding: 0 30rpx; */
	}

	.homeContent {
		padding: 10rpx;

		.navView {
			margin: 30rpx 0;
			display: flex;
			justify-content: space-evenly;

			.navItem {
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 60rpx;
					height: 60rpx;
				}

				text {
					font-size: 24rpx;
					margin-top: 10rpx;
					font-weight: bold;
				}
			}
		}



		// 制冷百科样式
		.cyclopedia {
			.cyclopediaItem {
				margin: 30rpx 0;
				display: flex;
				padding: 20rpx 0;
				justify-content: space-between;
				border-bottom: 2rpx solid #C0C0C0;

				.cyclopediaInfo {
					display: flex;
					margin-right: 30rpx;
					flex-direction: column;
					justify-content: space-between;

					.cyclopediaDesc {
						font-size: 30rpx;
						font-weight: bold;
					}

					.cyclopediaName {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 24rpx;
						color: #C0C0C0;
					}

				}

				.cyclopediaImg {
					image {
						width: 320rpx;
						height: 200rpx;
						border-radius: 10rpx;
					}
				}
			}

		}
	}
</style>
